<!-- switchDark/index.vue -->
<!-- 暗黑模式切换组件 -->
<template>
  <!-- 使用Element Plus的Switch组件 -->
  <el-switch v-model="globalStore.isDark" @change="switchDark" inline-prompt :active-icon="Sunny"
    :inactive-icon="Moon" />
  <!-- 双向绑定全局状态中的暗黑模式状态 -->
  <!-- 状态变化时触发切换方法 -->
  <!-- 开启内联提示样式 -->
  <!-- 开启状态显示太阳图标 -->
  <!-- 关闭状态显示月亮图标 -->
</template>

<script lang="ts">
// 导入必要的依赖
import { useTheme } from "@/hooks/useTheme";      // 导入主题切换钩子
import { useGlobalStore } from "@/stores/module/global";  // 导入全局状态仓库
import { Sunny, Moon } from "@element-plus/icons-vue";  // 导入Element Plus图标组件

export default {
  name: "SwitchDark",  // 组件名称

  setup() {
    // 从主题钩子中获取切换方法
    const { switchDark } = useTheme();

    // 获取全局状态仓库实例
    const globalStore = useGlobalStore();

    // 返回模板中使用的数据和方法
    return {
      switchDark,   // 暴露给模板的暗黑模式切换方法
      globalStore,  // 暴露给模板的全局状态对象
      Sunny,        // 暴露太阳图标组件
      Moon          // 暴露月亮图标组件
    };
  },
};
</script>